import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Divider, Card, Spin, Form, Modal, Input, Image, notification } from 'antd';
import { connect, useSelector } from 'umi';
import GoodsList from '@/components/GoodsList';
import GoodsForm from '@/components/GoodsForm';
import { fetchingAddGoodsListLoading } from '../models/goods.js';

const Modify = (props) => {
  const { list, dispatch } = props;
  const [showGoodsDetail, setShowGoodsDetail] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  // 创建 Form 实例，用于管理所有数据状态
  const [form] = Form.useForm();

  const echoForm = (record) => {
    // const values = form.getFieldsValue();
    // console.log(values);
    // console.log(record);
    form.setFields([
      {
        name: 'picture',
        value: record.goods_image,
      },
      {
        name: 'name',
        value: record.goods_name,
      },
      {
        name: 'price_max',
        value: record.goods_price_max,
      },
      {
        name: 'line_price_max',
        value: record.line_price_max,
      },
    ]);
  };

  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
    },
    {
      title: 'Image',
      dataIndex: 'goods_image',
      render: (text) => <img src={text} alt="" style={{ width: '40px', height: '40px' }} />,
    },
    {
      title: 'Name',
      dataIndex: 'goods_name',
      render: (text, record) => (
        <a
          onClick={() => {
            echoForm(record);
            setShowGoodsDetail(true);
          }}
        >
          {text}
        </a>
      ),
    },
    {
      title: 'Price_max',
      dataIndex: 'goods_price_max',
    },
    {
      title: 'Line_price_max',
      dataIndex: 'line_price_max',
    },
  ];

  // 数据倒序显示
  const reversedData = [...list].reverse();
  const loadingResult = useSelector(fetchingAddGoodsListLoading);

  useEffect(() => {
    dispatch({
      type: 'goods/getAllGoodsList',
    });
  }, [dispatch]);

  const handleFormSubmitModify = (formData) => {
    // 处理表单数据修改
    console.log('表单数据：', formData);
    // dispatch({
    //   type: '',
    //   payload: formData,
    // })
  };

  const handleOk = () => {
    // 发送修改表单的请求
    setConfirmLoading(true);
    form.validateFields().then(async (fieldsValue) => {
      console.log(fieldsValue);
      // 发送
      dispatch({
        type: 'goods/updateGoods',
        payload: fieldsValue,
      }).then(() => {
        notification.success({
          message: 'Update Success!',
          description: 'Database product information has been modified.',
          duration: 2.5,
        });
        setShowGoodsDetail(false);
        setConfirmLoading(false);
      });
    });
    // setTimeout(() => {

    // }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setShowGoodsDetail(false);
  };

  const GoodsDetail = () => {
    return (
      <>
        <Modal
          title="商品详情"
          open={showGoodsDetail}
          onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
        >
          <Form
            form={form}
            layout="vertical"
            name="form_in_modal"
            initialValues={{
              modifier: 'public',
            }}
          >
            <Form.Item name="picture" label="Picture">
              <Image width={200} src={form.getFieldValue('picture')} />
            </Form.Item>
            <Form.Item name="url" label="Url">
              <Input placeholder="重新输入图片url" allowClear />
            </Form.Item>

            <Form.Item name="name" label="Name">
              <Input placeholder="请输入商品名" allowClear />
            </Form.Item>
            <Form.Item name="price_max" label="Price_max">
              <Input placeholder="请输入价格" allowClear />
            </Form.Item>
            <Form.Item name="line_price_max" label="Line_price_max">
              <Input placeholder="请输入价格" allowClear />
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  };

  return (
    <>
      <PageContainer title={false}>
        <Card title="修改商品">
          <GoodsForm onHandleAdd={handleFormSubmitModify} />
        </Card>
        <Divider orientation="left">商品列表</Divider>
        {loadingResult ? <Spin size="large" /> : <GoodsList list={reversedData} columns={columns} />}
      </PageContainer>
      <GoodsDetail />
    </>
  );
};

const mapStateToProps = ({ goods }) => {
  return {
    ...goods,
  };
};

export default connect(mapStateToProps)(Modify);
